<template>
  <div class="login-page">
    <!-- 定义背景图片 -->
<svg preserveAspectRatio="none" viewBox="0 0 1000 200" xmlns="http://www.w3.org/2000/svg">
  <!-- 超粉嫩渐变 -->
  <defs>
    <linearGradient id="Gradient" x1="0" x2="1" y1="0" y2="0">
      <stop stop-color="#FF6B9D" offset="0%"/>   <!-- 樱花粉 -->
      <stop stop-color="#FFB8D1" offset="100%"/> <!-- 泡泡糖粉 -->
    </linearGradient>
  </defs>
  <rect fill="url(#Gradient)" height="80" width="1000"/>
  <path d="M0 80 Q500 280 ,1000 80" fill="url(#Gradient)" stroke="transparent"/>
</svg>

    <!--登陆卡片-->
    <h2 class="my-h2">轻触牌间喵，进入影中境</h2>
    <!-- 用户登录 -->
    <div :style="{ transform: pairClient }" class="mixJade">
      <img alt="管理员入口" height="48" src="/mia.svg" width="64" @click="clientToAdmin">
      <LoginForm :role="RoleEnum.CLIENT" @loginSuc="getLoginRole"/>
      <div>
        <el-button round type="success" @click="$router.push('/reception')">游客登录</el-button>
        <el-button round type="warning" @click="$router.push('/register')">账号注册</el-button>
        <el-button round type="danger" @click="$router.push('/findPwd')">找回密码</el-button>
      </div>
    </div>
    <!-- 医生登录 -->
    <div :style="{ transform: pairAdmin }" class="mixJade">
      <img alt="普通入口" height="48" src="/mia.svg" width="64" @click="adminToClient">
      <LoginForm :role="RoleEnum.DOCTOR" @loginSuc="getLoginRole"/>
      <div style="color: #6c757d">智慧唯在沉思中得享</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import LoginForm from "@/components/zoneView/LoginForm.vue";
import {onMounted, reactive, ref} from "vue";
import {reqGetLogin} from "@/request/PowerApi";
import {useRouter} from "vue-router";
import {RoleEnum} from "@/model/VO/LoginVo";

// 登陆的初始化
onMounted(() => {
  getLoginRole()
})
// 判断当前登陆角色
const router = useRouter()
const getLoginRole = () => {
  reqGetLogin().then(resp => {
    if (resp === RoleEnum.CLIENT) router.push("/reception")
    else if (resp === RoleEnum.DOCTOR) router.push("/backstage")
  })
}

const pairClient = ref<string>("rotateY(0deg)")
const pairAdmin = ref<string>("rotateY(180deg)")
const backColor = reactive({
  begin: "MediumVioletRed",
  end: "MediumOrchid"
})

const clientToAdmin = () => {
  pairClient.value = "rotateY(180deg)"
  pairAdmin.value = "rotateY(0deg)";
  backColor.begin = "ForestGreen"
  backColor.end = "DeepSkyBlue"
}

const adminToClient = () => {
  pairAdmin.value = "rotateY(-180deg)";
  pairClient.value = "rotateY(0deg)"
  backColor.begin = "MediumVioletRed"
  backColor.end = "MediumOrchid"
}
</script>

<style lang="scss" scoped>
/* 整个登录组件 */
.login-page {
  width: 99vw;
  height: 96vh;
  background: linear-gradient(to bottom, #FFF0F5, #FFE4E1);

  /* 背景的svg */
  svg {
    position: fixed;
    height: 50vh;
    width: 98vw;
  }

  /* 欢迎文字 */
  .my-h2 {
    position: fixed;
    color: #FF69B4;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Arial Rounded MT Bold', sans-serif;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    top: 15%;
  }
}

/* 翻转的卡片 */
.mixJade {
  position: absolute;
  width: 360px;
  margin-top: 8%;
  left: 50%;
  margin-left: -180px;
  text-align: center;
  justify-content: center;
  align-items: center;
  box-shadow: 0 10px 20px rgba(246, 130, 188, 0.2);
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  backface-visibility: hidden;
  transition: all 1s;
  user-select: none;
  padding: 30px;
  border: 1px solid #FFB6C1;

  /* 表单元素样式 */
  :deep(.el-form-item__label) {
    color: #FF69B4;
    font-weight: bold;
  }

  :deep(.el-input__inner) {
    border-radius: 20px;
    border: 1px solid #FFB6C1;
    &:focus {
      border-color: #FF69B4;
      box-shadow: 0 0 5px rgba(255, 105, 180, 0.5);
    }
  }

  :deep(.el-button) {
    border-radius: 20px;
    margin: 10px 5px;
    transition: all 0.3s;
    &.el-button--primary {
      background-color: #FF69B4;
      border-color: #FF69B4;
      &:hover {
        background-color: #FF1493;
        border-color: #FF1493;
      }
    }
  }

  /* 猫咪图标样式 */
  img {
    margin-bottom: 20px;
    filter: drop-shadow(0 2px 4px rgba(255, 105, 180, 0.3));
    transition: all 0.3s;
    &:hover {
      transform: scale(1.1);
      cursor: pointer;
    }
  }

  /* 底部文字 */
  div[style*="color: #6c757d"] {
    color: #FF69B4 !important;
    font-style: italic;
    margin-top: 15px;
  }
}
:deep(.el-button) {
  border-radius: 20px;
  margin: 10px 5px;
  transition: all 0.3s;
  font-weight: bold;
  letter-spacing: 1px;
  box-shadow: 0 2px 6px rgba(255, 105, 180, 0.3);

  // 默认按钮样式
  &:not([type]) {
    background-color: #FFE4E1;
    border-color: #FFB6C1;
    color: #FF69B4;
    &:hover {
      background-color: #FFD1DC;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(255, 105, 180, 0.4);
    }
    &:active {
      transform: translateY(0);
    }
  }

  // 成功按钮（游客登录）
  &.el-button--success {
    background: linear-gradient(135deg, #A2D9A0, #7BC67B);
    border-color: transparent;
    color: white;
    &:hover {
      background: linear-gradient(135deg, #7BC67B, #5CAE5C);
      transform: translateY(-2px);
    }
  }

  // 警告按钮（账号注册）
  &.el-button--warning {
    background: linear-gradient(135deg, #FFD166, #FFB347);
    border-color: transparent;
    color: white;
    &:hover {
      background: linear-gradient(135deg, #FFB347, #FF9A1F);
      transform: translateY(-2px);
    }
  }

  // 危险按钮（找回密码）
  &.el-button--danger {
    background: linear-gradient(135deg, #FF6B6B, #FF5252);
    border-color: transparent;
    color: white;
    &:hover {
      background: linear-gradient(135deg, #FF5252, #FF3030);
      transform: translateY(-2px);
    }
  }

  // 主要按钮（登录按钮）
  &.el-button--primary {
    background: linear-gradient(135deg, #FF69B4, #FF4081);
    border-color: transparent;
    color: white;
    &:hover {
      background: linear-gradient(135deg, #FF4081, #F50057);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(255, 105, 180, 0.5);
    }
  }
}
</style>

